<!--
 * @Author: your name
 * @Date: 2021-03-29 11:08:53
 * @LastEditTime: 2021-04-12 16:30:25
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \active-front\src\components\CountDown\index.vue
-->
<template>
  <div v-if="s !== 'none'">
    <div
      v-if="temp"
      :class="{
        Date:
          this._props.paramsStyle == 'center' ? (d > 0 ? true : false) : false,
        FeDate:
          this._props.paramsStyle == 'center' ? (d <= 0 ? true : false) : false,
        StartDate:
          this._props.paramsStyle == 'start' ? (d > 0 ? true : false) : false,
        FeStartDate:
          this._props.paramsStyle == 'start' ? (d <= 0 ? true : false) : false
      }"
    >
      <p class="date">{{ d == 0 ? null : d + "天" }}</p>
      <p class="date">{{ h + "小时" }}</p>
      <!-- <p>:</p> -->
      <p class="date">{{ m + "分" }}</p>
      <!-- <p>:</p> -->
      <p class="date">{{ s + "秒" }}</p>
    </div>
    <div v-else>
      <p style="color:#909399">活动已结束</p>
    </div>
  </div>
</template>
<script>
export default {
  name: "Date",
  props: {
    time: {
      type: String
    },
    paramsStyle: {
      type: String
    }
  },
  data() {
    return {
      temp: true,
      d: null,
      h: null,
      m: null,
      s: "none"
    };
  },
  created() {
    this.countTime();
  },
  methods: {
    countTime() {
      //获取当前时间
      var date = new Date();
      var now = date.getTime();
      //设置截止时间
      var endDate = new Date(this.time);
      var end = endDate.getTime();
      //时间差
      var leftTime = end - now;
      if (leftTime <= 0) {
        this.temp = false;
        this.s = null;
        this.$emit("timeEnd");
        return;
      }
      //定义变量 d,h,m,s保存倒计时的时间
      if (leftTime >= 0) {
        this.d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
        this.h = Math.floor((leftTime / 1000 / 60 / 60) % 24);
        this.m = Math.floor((leftTime / 1000 / 60) % 60);
        this.s = Math.floor((leftTime / 1000) % 60);
      }
      //递归每秒调用countTime方法，显示动态时间效果
      setTimeout(this.countTime, 1000);
    }
  }
};
</script>
<style scoped>
.Date {
  display: flex;
  justify-content: center;
  color: #67c23a;
}

.FeDate {
  display: flex;
  justify-content: center;
  color: #f56c6c;
}
.StartDate {
  display: flex;
  justify-content: start;
  color: #f56c6c;
}
.FeStartDate {
  display: flex;
  justify-content: start;
  color: #67c23a;
}
</style>
